<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %>

<%@ Register Assembly="Shield.Web.UI" Namespace="Shield.Web.UI" TagPrefix="shield" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
     <asp:ScriptManager ID="ScriptManager1" runat="server" />

    <div style="font-family: verdana; padding-top: 10px; padding-bottom: 20px; padding-left: 20px; padding-right: 20px; border: 1px solid #40B3DF; top: 5px; left: 5px; width: 920px; height: 700px;">
        <div style="color: #40B3DF; text-align: right; font-size: 19px; padding: 0px; right: 150px;">
            Sales DashBoard using <span style="background-color: #40B3DF; color: #ffffff;">Shield
            UI ASP.NET Chart</span>
        </div>
        <div id="container1_box" style="width: 400px; height: 350px; border: 2px solid #40B3DF; margin: auto; top: 55px; left: 25px; position: absolute;">
            <div id="container1" style="width: 390px; height: 290px; left: 5px; top: 5px; margin: auto; position: inherit;">
                <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false">
                    <ContentTemplate>
                        <shield:ShieldChart ID="ShieldChart1" runat="server" AutoPostBack="true" OnSelectionChanged="ShieldChart1_SelectionChanged" Width="320px" Height="330px"
                            OnTakeDataSource="ShieldChart1_TakeDataSource">
                            <PrimaryHeader Text="Quarterly Sales">
                            </PrimaryHeader>
                            <ExportOptions AllowExportToImage="false" AllowPrint="false" />
                            <TooltipSettings CustomPointText="Sales Volume: <b>{point.y}</b>">
                            </TooltipSettings>
                            <Axes>
                                <shield:ChartAxisX CategoricalValuesField="Quarter">
                                </shield:ChartAxisX>
                                <shield:ChartAxisY>
                                    <Title Text="Quarter Overview"></Title>
                                </shield:ChartAxisY>
                            </Axes>
                            <DataSeries>
                                <shield:ChartBarSeries DataFieldY="Sales">
                                    <Settings EnablePointSelection="true" EnableAnimation="true">
                                        <DataPointText BorderWidth="">
                                        </DataPointText>
                                    </Settings>
                                </shield:ChartBarSeries>
                            </DataSeries>
                            <Legend Align="Center" BorderWidth=""></Legend>
                        </shield:ShieldChart>
                    </ContentTemplate>
                </asp:UpdatePanel>
            </div>
        </div>
        <div id="container2_box" style="width: 500px; height: 350px; border: 2px solid #40B3DF; margin: auto; top: 55px; left: 450px; position: absolute;">
            <div id="container2" style="width: 490px; height: 340px; margin: auto; top: 5px; left: 5px; position: inherit;">
                <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false">
                    <ContentTemplate>
                        <shield:ShieldChart ID="ShieldChart2" OnTakeDataSource="ShieldChart2_TakeDataSource" AutoPostBack="true"
                            OnSelectionChanged="ShieldChart2_SelectionChanged" runat="server" Width="463px" Height="331px">
                            <ExportOptions AllowExportToImage="false" AllowPrint="false" />
                            <PrimaryHeader Text="Select a Quarter to show products sales">
                            </PrimaryHeader>
                            <Axes>
                                <shield:ChartAxisY>
                                    <Title Text="Break-Down for selected quarter"></Title>
                                </shield:ChartAxisY>
                            </Axes>
                            <DataSeries>
                                <shield:ChartDonutSeries EnableValueXSorting="false" CollectionAlias="Q Data" DataFieldY="Data" DataFieldX="Product">
                                    <Settings EnablePointSelection="true" EnableAnimation="true" AddToLegend="true">
                                        <DataPointText BorderWidth="">
                                        </DataPointText>
                                    </Settings>
                                </shield:ChartDonutSeries>
                            </DataSeries>
                            <Legend Align="Center" BorderWidth=""></Legend>
                        </shield:ShieldChart>
                    </ContentTemplate>
                    <Triggers>
                        <asp:AsyncPostBackTrigger ControlID="ShieldChart1" EventName="SelectionChanged" />
                    </Triggers>
                </asp:UpdatePanel>
            </div>
        </div>
        <div id="container3_box" style="width: 925px; height: 300px; border: 2px solid #40B3DF; margin: auto; top: 420px; left: 25px; position: absolute;">
            <div id="container3" style="width: 890px; height: 290px; margin: auto; top: 5px; left: 5px; position: inherit;">
                <asp:UpdatePanel ID="UpdatePanel3" runat="server" UpdateMode="Conditional">
                    <ContentTemplate>
                        <shield:ShieldChart ID="ShieldChart3" runat="server" OnTakeDataSource="ShieldChart3_TakeDataSource"
                            Width="905px" Height="280px">
                            <DataSeries>
                                <shield:ChartLineSeries DataFieldY="QuarterSales">
                                    <Settings AddToLegend="false">
                                        <DataPointText BorderWidth="">
                                        </DataPointText>
                                    </Settings>
                                </shield:ChartLineSeries>
                            </DataSeries>
                            <PrimaryHeader Text="Select a product to show sales details...">
                            </PrimaryHeader>
                            <ExportOptions AllowExportToImage="false" AllowPrint="false" />
                            <Legend Align="Center" BorderWidth=""></Legend>
                        </shield:ShieldChart>
                    </ContentTemplate>
                    <Triggers>
                        <asp:AsyncPostBackTrigger ControlID="ShieldChart2" EventName="SelectionChanged" />
                    </Triggers>
                </asp:UpdatePanel>
            </div>
        </div>
    </div>
</asp:Content>
